import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {ModalStackNavigation} from '../navigator';
import defaultAvatarImg from '@/assets/default_avatar.png';
import Touchable from '@/components/Touchable';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '../models';

const mapStateToProps = ({user}: RootState) =>
  // {route}: {route: RouteProp<HomeParamList, string>},
  {
    // const {namespace} = route.params;
    // const modelState = state[namespace];
    return {
      user: user.user,
      // namespace,
      // home: modelState,
      // loading: state.loading.effects[`${namespace}/fetchChannel`],
    };
  };

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
  navigation: ModalStackNavigation; //获取跳转路由之类参数
}

const Account = (props: IProps) => {
  const {navigation, user, dispatch} = props;
  let onPress = () => {
    navigation.navigate('Login');
  };
  const logout = () => {
    dispatch({
      type: 'user/logout',
    });
  };
  return user ? (
    <View>
      <View style={styles.container}>
        <Image source={{uri: user.avatar}} style={styles.avatar} />
        {/* <Button title="跳转到详情页" onPress={skipDetail} /> */}
        <View style={styles.loginRight}>
          <Text style={styles.loginName}>{user.name}</Text>
        </View>
      </View>
      <Touchable style={[styles.loginBtn, {marginLeft: 15}]} onPress={logout}>
        <Text style={styles.loginBtnText}>退出登录</Text>
      </Touchable>
    </View>
  ) : (
    <View style={styles.container}>
      <Image source={defaultAvatarImg} style={styles.avatar} />
      {/* <Button title="跳转到详情页" onPress={skipDetail} /> */}
      <View style={styles.right}>
        <Touchable style={styles.loginBtn} onPress={onPress}>
          <Text style={styles.loginBtnText}>立即登录</Text>
        </Touchable>
        <Text style={styles.tip}>登陆后自动同步所有记录哦~~~~</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    margin: 15,
  },
  avatar: {
    width: 70,
    height: 70,
    borderRadius: 35,
  },
  right: {
    flex: 1,
    marginLeft: 15,
  },
  loginBtn: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 26,
    width: 76,
    borderRadius: 13,
    borderColor: '#F86442',
    borderWidth: 1,
    marginBottom: 12,
  },
  loginBtnText: {
    color: '#F86442',
    fontWeight: '900',
  },
  tip: {
    color: '#999',
  },
  loginRight: {
    flex: 1,
    justifyContent: 'center',
    marginLeft: 20,
  },
  loginName: {
    color: '#000',
  },
});

export default connector(Account);
